<template>
  <div class="card-list">
    <div class="name">
      <img :src="listData.headimgurl"/>
      <span>{{listData.nickname}}</span>
    </div>
    <div class="detail">
      <p v-if="address">{{address}}</p>
      <p v-else>暂未填写</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    listData: {
      type: Object,
      default: {},
    },
  },
  data () {
    return {
      address: {}
    }
  },
  mounted () {
    // 如果活动地址未填写，则取个人中心设置的全局地址
    const addr = this.listData.addr || this.listData.playeraddr
    this.address = this.addrFilter(addr)
  },
  methods: {
    addrFilter (val) {
      if (val) {
        const data = JSON.parse(val)
        return `${data.userName}，${data.telNumber}，${data.provinceName}${data.cityName}${data.countyName}${data.detailInfo}`
      }
    }
  },
}
</script>

<style lang="less" scoped>
.card-list {
  margin-bottom: 20rpx;
  padding: 0 30rpx;
  background-color: #fff;
  .name {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    font-size: 28rpx;
    color: #333;
    img {
      display: block;
      width: 50rpx;
      height: 50rpx;
      border-radius: 50% 50%;
      margin-right: 20rpx;
    }
  }
  .detail {
    padding: 30rpx 0;
    border-top: 1rpx solid #e6ebf0;
    font-size: 32rpx;
  }
}
</style>
